import * as echarts from '../../ec-canvas/echarts';

// 折线图
function initChart1(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  var option1 = {
    title: {
      text: '六种气体近一周的数值显示--折线图',
      left: 'center'
    },
    legend: {
      data: ['氨气', '硫化氢', '甲酸醇','甲硫二醇','乙胺','吲哚'],
      width: 250,
      top: 30,
      left: 'center',
      backgroundColor: 'blue',
      z: 100
    },
    grid: {
      containLabel: true,
      top: '100',
      height:'250'
    },
    // 点击展示详细数值
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      // show: false
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
      // show: false
    },
    series: [{
      name: '氨气',
      type: 'line',
      smooth: true,
      data: [18, 36, 65, 30, 78, 40, 33]
    }, {
      name: '硫化氢',
      type: 'line',
      smooth: true,
      data: [12, 50, 51, 35, 70, 30, 20]
    }, {
      name: '甲酸醇',
      type: 'line',
      smooth: true,
      data: [10, 30, 31, 50, 40, 20, 10]
    },{
      name: '甲硫二醇',
      type: 'line',
      smooth: true,
      data: [15, 20, 10, 15, 10, 10, 20]
    },{
      name: '乙胺',
      type: 'line',
      smooth: true,
      data: [15, 14, 20, 60, 50, 40, 10]
    },{
      name: '吲哚',
      type: 'line',
      smooth: true,
      data: [5, 4, 8, 7, 4, 3, 5]
    }]
  };

  chart.setOption(option1);
  return chart;
}

// 饼状图
function initChart2(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  var option2 = {
    title: {
      text: '六种气体数值显示--饼状图',
      left: 'center',
      top:'0'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      width: 250,
      top: '30',
      left: 'center',
      backgroundColor: 'blue',
    },
    series: [{
      label: {
        normal: {
          fontSize: 13
        }
      },
      type: 'pie',
      center: ['50%', '50%'],//位置
      radius: ['50%', '30%'],//圈大小
      data: [{//每一项
        value: 60,
        name: '氨气'
      }, {
        value: 20,
        name: '硫化氢'
      }, {
        value: 10,
        name: '甲酸醇'
      }, {
        value: 3,
        name: '甲硫二醇'
      }, {
        value: 5,
        name: '乙胺'
      }, {
        value: 2,
        name: '吲哚'
      }]
    }], 
  }
  chart.setOption(option2);
  return chart;
}

// 柱状图
function initChart3(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  var option3 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      },
      confine: true
    },
    legend: {
      data: ['热度', '正面', '负面']
    },
    grid: {
      left: 20,
      right: 20,
      bottom: 15,
      top: 40,
      containLabel: true
    },
    xAxis: [{
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      },
      axisLabel: {
        color: '#666'
      }
    }],
    yAxis: [
      {
        type: 'category',
        axisTick: { show: false },
        data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#666'
        }
      }
    ],
    series: [{
        name: '热度',
        type: 'bar',
        label: {
          normal: {
            show: true,
            position: 'inside'
          }
        },
        data: [300, 270, 340, 344, 300, 320, 310],
        itemStyle: {
          emphasis: {
            color: '#37a2da'
          }
        }
      },{
        name: '正面',
        type: 'bar',
        stack: '总量',
        label: {
          normal: {
            show: true
          }
        },
        data: [120, 102, 141, 174, 190, 250, 220],
        itemStyle: {
          emphasis: {
            color: '#32c5e9'
          }
        }
      },{
        name: '负面',
        type: 'bar',
        stack: '总量',
        label: {
          normal: {
            show: true,
            position: 'left'
          }
        },
        data: [-20, -32, -21, -34, -90, -130, -110],
        itemStyle: {
          emphasis: {
            color: '#67e0e3'
          }
        }
      }
    ]
  };
  chart.setOption(option3);
  return chart;
}

Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts六种气体数值变化显示',
      path: 'pages/HazardContent/HazardContent',
      success: function () { },
      fail: function () { }
    }
  },
  data: {
    zhexian: {
      onInit: initChart1
    },
    bingzhuang:{
      onInit: initChart2
    },
    zhuzhuang:{
      onInit: initChart3
    }
  },
 
  onReady() {
  }
});